<template>
<div>
  <div style="background-color: #FFFFFF;width: 100%;height: 900px">
    <!--      上半部分统计-->
    <div style="padding: 30px">
      <div style="font-size: 20px;font-weight: 500;margin-bottom: 20px">新增满减卷</div>
      <div style="width: 1553px;min-height: 500px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);padding-top: 20px;display: flex;justify-content: center">
        <el-form ref="form" :model="form" :rules="rules" label-width="180px">
          <div style="margin-top: 20px">
            <div>
              <span style="font-size: 20px;font-weight: bold">基础设置</span>
              <el-form-item label="消费卷名称：" prop="name" style="margin-top: 20px">
                <el-input style="width: 400px" v-model="form.name"  placeholder="请输入申请的金额"/>
              </el-form-item>
              <el-form-item label="发放数量：" prop="amount">
                <el-input style="width:380px" v-model="form.amount"  placeholder="请输入申请的金额"/>
                张
              </el-form-item>
              <div style="display: flex">
                <el-form-item label="金额设置：" prop="takeCashAmount">
                  消费满
                  <el-input style="width: 140px" v-model="form.rule.condition"  placeholder="请输入金额"/>
                  元，立减
                  <el-input style="width: 130px" v-model="form.rule.reduce"  placeholder="请输入金额"/>
                  元
                </el-form-item>
              </div>
              <el-form-item label="积分价值：" prop="pointWorth">
                领取该卷需要
                <el-input style="width: 120px" v-model="form.pointWorth"  placeholder="请输入积分"/>
                积分
              </el-form-item>
              <el-form-item label="活动时间：" prop="gainStartDatetime">
                <div>
                  <el-date-picker
                    v-model="form.gainStartDatetime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>至
                  <el-date-picker
                    v-model="form.gainEndDatetime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="限领次数：" prop="amountPerPerson">
                每个账号可领取
                <el-input style="width: 120px" v-model="form.amountPerPerson"  placeholder="请输入数量"/>
                次
              </el-form-item>
            </div>
            <div>
              <span style="font-size: 20px;font-weight: bold">其他设置</span>
              <el-form-item label="适用商家：" prop="merchantId" style="margin-top: 20px">
              <el-input style="width: 400px" v-model="form.merchantId"  placeholder="请输入申请的金额"/>
            </el-form-item>
              <el-form-item label="适用商品：" prop="productId">
                <el-input style="width:400px" v-model="form.productId"  placeholder="请输入申请的金额"/>
              </el-form-item>
              <div style="display: flex">
                <el-form-item label="消费卷类型：" prop="categoryType">
                  <el-radio v-model="form.categoryType" :label="1">普通消费卷</el-radio>
                  <el-radio v-model="form.categoryType" :label="2">限时消费劵</el-radio>
                </el-form-item>
              </div>
              <el-form-item label="使用时限：" prop="delayDay">
                领取后
                <el-input style="width: 120px" v-model="form.delayDay"  placeholder="请输入积分"/>
                天内可使用
              </el-form-item>
              <el-form-item label="使用须知：" prop="description">
                <el-input style="width: 400px" type="textarea" v-model="form.description"  placeholder="请输入数量"/>
              </el-form-item>
            </div>
          </div>
          <div style="display: flex;justify-content: center;margin-bottom: 30px">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</div>

</template>

<script>
import { enterActivity } from '@/api/activity/activity'
import { addcoupon } from '@/api/marketing'

export default {
  name: 'addcoupon',
  data(){
    return{
      form:{
        amount: 0,
        amountPerPerson: 0,
        categoryType: 1,
        delayDay: 0,
        description: "",
        gainEndDatetime: "",
        gainStartDatetime: "",
        merchantId: 0,
        name: "",
        pointWorth: "",
        productId: 0,
        rule: {
          reduce:'',
          condition:''
        },
        type: 0,
        usableEndDatetime: "",
        usableStartDatetime: ""
      },
      radio:1,
      rules:{
        name:[
          { required: true, message: '请输入消费卷名称', trigger: 'change' }
        ],
        amount:[
          { required: true, message: '发放数量', trigger: 'change' }
        ],
        takeCashAmount:[
          { required: true, message: '请输入金额设置', trigger: 'change' }
        ],
        pointWorth:[
          { required: true, message: '请输入积分要求', trigger: 'change' }
        ],
        gainStartDatetime:[
          { required: true, message: '请选择活动时间', trigger: 'change' }
        ],
        amountPerPerson:[
          { required: true, message: '请输入限制的次数', trigger: 'change' }
        ],
        merchantId:[
          { required: true, message: '请选择适用商家', trigger: 'change' }
        ],
        productId:[
          { required: true, message: '请选择适用商品', trigger: 'change' }
        ],
        categoryType:[
          { required: true, message: '请选择消费卷类型', trigger: 'change' }
        ],
        delayDay:[
          { required: true, message: '请输入使用时限', trigger: 'change' }
        ],
        description:[
          { required: true, message: '请输入须使用知', trigger: 'change' }
        ],
      },
    }
  },
  methods:{
    // 表单提交
    submitForm(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          addcoupon(this.form).then(response => {
            this.$modal.msgSuccess('添加成功')
            this.reset()
          })
        }})
    },
    // 表单
    reset(){
     this.form={
          amount: 0,
          amountPerPerson: 0,
          categoryType: 1,
          delayDay: 0,
          description: "",
          gainEndDatetime: "",
          gainStartDatetime: "",
          merchantId: 0,
          name: "",
          pointWorth: "",
          productId: 0,
          rule: {},
          type: 0,
          usableEndDatetime: "",
          usableStartDatetime: ""
      }
    }
  }
}
</script>

<style scoped>

</style>
